<template>
    <div class="news-page" id="news">
        <div class="top">
            <v-breadcrumbs>
                <v-breadcrumbs-item v-for="(item, index) in breadcrumbs">
                    <span :class="['breadcrumbs-item', index == 0 ? 'long' : '']"
                        :style="{ color: `${index == 0 ? '#B1B6C6' : '#EAECEF'}` }" @click="backTo(index)">{{ item.title
                        }}</span>
                    <v-breadcrumbs-divider v-if="index == 0">
                        <v-icon class="top-breadcrumbs" icon="mdi-chevron-right"></v-icon>
                    </v-breadcrumbs-divider>
                </v-breadcrumbs-item>
            </v-breadcrumbs>
        </div>
        <!-- <div class="tips-box d-flex align-center">
            <span class="t1">{{ $t('message.News.info.c') }}</span>
            <span class="t2">{{ $t('message.News.info.d') }}</span>
        </div> -->
        <div class="news-title">
            <p class="n-title">{{ $t('message.News.info.a') }}</p>
            <div class="d-flex align-center justify-space-between">
                <span class="n1">{{ $t('message.News.info.e') }}</span>
                <span>
                    <a href="https://www.tradingview.com/symbols/BTCUSD/" target="_blank">BTC</a>
                     / 
                    <a href="https://www.tradingview.com/symbols/ETHUSD/" target="_blank">ETH</a>
                </span>
                
            </div>
        </div>
        <div class="time-box d-flex align-center">
            <div class="time-block">
                {{ datesValue.day }}
            </div>
            <div class="time-text d-flex flex-column">
                <span>{{ datesValue.week }}</span>
                <span>{{ datesValue.year }}/{{ datesValue.month }}</span>
            </div>
        </div>
        <div class="content-Loding" v-if="dataAry.length == 0">
            <v-progress-circular :width="3" :size="40" color="#fcc235" indeterminate></v-progress-circular>
        </div>
        <div class="time-line" v-else>
            <v-timeline align="start" side="end" truncate-line="start">
                <v-timeline-item :size="10" v-for="(item, index) in dataAry" :key="item.id"
                    :dot-color="index == 0 ? actioveColor : defultColor">
                    <div class="news-content d-flex flex-column" :id="`news${item.id}`">
                        <span class="time">{{ item.time }}</span>
                        <span class="title" @click="onJump(item)" :class="{hit:item.thirdPartyId==0}">{{ item.title }}</span>
                        <span class="content">{{ item.content || item.subTitle }}</span>
                        <h6 class="seo-tag">chainingview</h6>
                        <!-- <Operate></Operate> -->
                    </div>
                </v-timeline-item>
            </v-timeline>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, onUnmounted, watch } from "vue"
import Operate from '@/components/monitor/components/operate.vue';
import { URL_PRESS_NEWS_PAGE } from "@/comm/api";
import { formatTimeAgo } from "@/comm/format";
import { partDate } from "@/comm/format";
import { get } from "@/comm/request";
import { NEWS_ID_CHANGE, Bus } from "@/connetion/Bus";
import i18n from "@/locals";
import { useRouter } from "vue-router";
const defultColor = '#171A1F'
const actioveColor = '#616877'
const dataAry = ref<any[]>([]);
const switchValue = ref(false);
const datesValue = ref({
    day: '',
    week: '',
    year: '',
    month: '',
});
let newsID: any = '';
const router = useRouter();
const breadcrumbs = [{
    title: i18n.global.t("message.News.info.b"),
    disabled: true,
    href: 'breadcrumbs_dashboard',
}, {
    title: i18n.global.t("message.News.info.a"),
    disabled: false,
}]
const totalPage = ref(1);
const pages = ref({
    current: 1,
    size: 10,
})

function onJump(item: any){
    if(item.thirdPartyId == 0){
        window.open("/info.html")
    }
}

const backTo = (e: any) => {
    console.log('点击', e)
    if (e == 0) {
        router.push("/");
    }
}
onMounted(() => {
    console.log('监听路由!!!!!!!!!!!!!!!!!!!!!!!!!', router.currentRoute.value.query)
    if (router.currentRoute.value.query?.id) {
        newsID = router.currentRoute.value.query.id
    }
    Bus.on(NEWS_ID_CHANGE, (id: any) => {
        newsID = id
        getNewsData()
    })
    datesValue.value = partDate(new Date().getTime())
    getNewsData()
    document.getElementById('rout-page')?.addEventListener('scroll', scrollFn)
})
onUnmounted(() => {
    document.getElementById('rout-page')?.removeEventListener('scroll', scrollFn)
});
//下滑事件
function scrollFn() {
    const element = document.getElementById('rout-page');
    if (element!.scrollTop + element!.clientHeight >= element!.scrollHeight) {
        console.log('触底加载!!!!!!!!!')
        if (pages.value.current < totalPage.value) {
            pages.value.current++;
            getNewsData()
        }
    }
}
function changeSwitch(e: any) {
    totalPage.value = 1;
    pages.value.current = 1;
    getNewsData()
    console.log('点击切换', e)
}
async function getNewsData() {
    let res: any = await get(URL_PRESS_NEWS_PAGE, pages.value);
    totalPage.value = res.data.pages;
    if (pages.value.current <= res.data.pages) {
        dataAry.value = [...dataAry.value, ...res.data.records];
        dataAry.value.forEach(item => {
            item.time = formatTimeAgo(`${item.date}000`);
        })
        setTimeout(() => {
            scrollToId()
        }, 800)
    }
    console.warn('获取新闻信息###########', dataAry.value)
}
function scrollToId() {
    const element = document.getElementById(`news${newsID}`);
    if (element) {
        element.scrollIntoView({ behavior: 'smooth' })
    }
}
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
